/**
 * 导航栏标题
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    StatusBar,Platform
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowStatusBar: true,
        };
    }
    render() {
        let hasLeft=false;
        let hasRight=false;
        let NavigationBar = [];

        let leftIconColor=this.props.leftIconColor?this.props.leftIconColor:'black';
        let rightIconColor=this.props.rightIconColor?this.props.rightIconColor:'black';

        // 左边图片按钮
        if (this.props.leftIcon != undefined&&this.props.leftIcon!='') {
            hasLeft=true;
            NavigationBar.push(
                <TouchableOpacity key={'leftIcon'} activeOpacity={0.75} style={{flex:1,paddingLeft:3}}
                    onPress={this.props.leftIconAction}>
                    <Icon color={leftIconColor} size={30} name={this.props.leftIcon}/>
                </TouchableOpacity>
            )
        }

        // 标题
        if (this.props.title != undefined) {
            NavigationBar.push(
                <View key={'title'} style={[styles.titleWrap,{flex:8}]}>
                    <TouchableOpacity onPress={()=>{this.setState({isShowStatusBar:(this.state.isShowStatusBar?false:true)})}}>
                        <Text style={styles.title}>{this.props.title}</Text>
                    </TouchableOpacity>
                </View>
            )
        }

        // 自定义标题View
        if (this.props.titleView != undefined) {
            let Component = this.props.titleView;
            NavigationBar.push(<Component key={'titleView'}/>)
        }

        // 右边图片按钮
        if (this.props.rightIcon != undefined&&this.props.rightIcon!='') 
        {
            hasRight=true;

            NavigationBar.push(
                <TouchableOpacity key={'rightIcon'} activeOpacity={0.75} style={[{flex:1}]}
                    onPress={this.props.rightIconAction}>
                    <Icon color={leftIconColor} size={30} name={this.props.rightIcon}/>
                </TouchableOpacity>
            )
        }

        // 右边文字按钮
        if (this.props.rightButton != undefined) {
            hasRight=true;
            NavigationBar.push(
                <TouchableOpacity key={'rightButton'} activeOpacity={0.75} style={[{flex:1}]}
                    onPress={this.props.rightButtonAction}>
                    <Text style={styles.buttonTitleFont}>{this.props.rightButton}</Text>
                </TouchableOpacity>
            )
        }

        if (this.props.rightMenu != undefined) {
            hasRight=true;
            NavigationBar.push(
                <TouchableOpacity key={'rightMenu'} activeOpacity={0.75} style={styles.rightMenu}
                    onPress={this.props.rightMenuAction}>
                    <Text style={{color: 'gray', fontSize: 12}}>{this.props.rightMenu}</Text>
                    <Image source={{uri: 'ic_food_ordering'}} style={{width: 16, height: 16}}/>
                </TouchableOpacity>
            )
        }
        var STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 0 : 0;
        let navigationBarContainer=[];
        let marginTop={marginTop:(this.state.isShowStatusBar?0:STATUS_BAR_HEIGHT)}
        navigationBarContainer.push(styles.navigationBarContainer);
        navigationBarContainer.push(marginTop);

        if(this.props.bgColor!=undefined&&this.props.bgColor)
        {
            navigationBarContainer.push({backgroundColor: this.props.bgColor});
        }


        if(hasLeft&&!hasRight)
        {
            NavigationBar.push(<TouchableOpacity key={'rightMenux'} activeOpacity={0.75} style={{width:40}}/>);
        }
        if(!hasLeft&&hasRight)
        {
            NavigationBar.unshift(<TouchableOpacity key={'leftMenux'} activeOpacity={0.75} style={[styles.rightMenu,{backgroundColor: 'red'}]}/>);
        }

        return (
            <View style={navigationBarContainer}>
                {NavigationBar}
                
                <StatusBar
                    animated={true}
                    hidden={this.state.isShowStatusBar}
                    backgroundColor={'blue'}
                    translucent={true}
                    barStyle={'default'}
                    showHideTransition={'fade'}
                    networkActivityIndicatorVisible={true}
                />
            </View>
        )
    }

}

const styles = StyleSheet.create({
    navigationBarContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 44,
        borderBottomColor: '#ccc',
        borderBottomWidth: 0.5,
        backgroundColor: 'red',
        // backgroundColor: '#0066c6',
        // backgroundColor: '#ff7419',
    },
    titleWrap: {
        flex:1,
        alignItems:'center',

    },
    title: {
        marginLeft: 10,
        fontSize: 20,
        color:'#FFFFFF',
        fontWeight: '900' 
    },
    leftIcon: {
        paddingLeft: 15,
        paddingRight: 15,
    },
    rightIcon: {
        position: 'absolute',
        right: 10,
        top: 7
    },
    rightButton: {
        position: 'absolute',
        right: 10,
        height: 44,
        justifyContent: 'center',
        flexDirection: 'row',
    },
    buttonTitleFont: {
        color: 'white',
        fontSize: 15,
    },
    rightMenu: {
        position: 'absolute',
        right: 10,
        height: 44,
        justifyContent: 'center',
        flexDirection: 'row',
        alignItems: 'center',

    },
        debugborder:{
        borderStyle: 'solid',//'solid', 'dotted', 'dashed'
        borderColor: 'red', // More opaque
        borderWidth: 1,
    },
});